<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>title</title>
    <style>
      .v-enter-from {
        opacity: 0;
      }

      .v-enter-active,
      .v-leave-active {
        transition: opacity 1s;
      }

      .v-enter-to,
      .v-leave-from{
        opacity: 1;
      }

      .v-leave-to {
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="root"></div>

    <script>
      //多个单元素标签之间的切换
      //多个单组件之间的切换

      const componentA = {
          template: `<div>hello yunmu</div>`
      }


      const componentB = {
          template: `<div>Bye yunmu</div>`
      }

      const app = Vue.createApp({
        data() {
          return {
            show: true,
            component:"component-a"
          };
        },

        methods: {
          handleClick() {
            if(this.component === "component-a"){
                this.component = "component-b"
            }else{
                this.component = "component-a"
            }
          },
        },

        //template: `
        //        <transition mode="out-in" appear>
        //           <div v-if="show">hello world</div>
        //           <div v-else>Bye world</div>
        //        </transition> 
        //        <button @click="handleClick">切换</button>  
        //        `,

        components:{
            "component-a":componentA,
            "component-b":componentB
        },

        template: `
                <transition mode="out-in" appear>
                    <component :is="component">
                </transition> 
                <button @click="handleClick">切换</button>  
                `,
      });

      const vm = app.mount("#root");
    </script>
  </body>
</html>
